<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <!-- meta:vp-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title>首页</title>
    <!-- 导入css -->
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/index.css" />

</head>

<body>
    <div class="jd_layout">
        <!--搜索头部-->
        <header class="jd_header">
            <div class="jd_header_box">
                <a href="#" class="icon_logo"></a>
                <!-- 小键盘  enter 改变成  搜索 按钮 -->
                <form action="#">
                    <span class="icon_search"></span>
                    <input type="search" placeholder="提示站位" />
                </form>
                <a href="#" class="login">登录</a>
            </div>
        </header>
        <!--轮播图-->
        <div class="jd_banner">
            <ul class="clearfix">
                <li>
                    <a href="#"><img src="images/l8.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l1.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l2.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l3.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l4.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l5.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l6.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l7.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l8.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/l1.jpg" alt="" /></a>
                </li>
            </ul>
            <ul>
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!--导航栏-->
        <nav class="jd_nav">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/nav0.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav1.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav2.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav3.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav4.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav5.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav6.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav7.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!--商品-->
        <main class="jd_product">
            <!--商品子盒子-->
            <section class="product_box jd_sk">
                <!--头部-->
                <div class="product_box_tit no_border">
                    <div class="f_left m_l10">
                        <span class="sk_icon"></span>
                        <span class="sk_name m_l10">掌上秒杀</span>
                        <div class="sk_time m_l10">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="f_right m_r10"><a href="#">更多></a></div>
                </div>
                <!--内容-->
                <div class="product_box_con">
                    <ul class="clearfix">
                        <li>
                            <a href="#"><img src="images/detail01.jpg" alt="" /></a>
                            <p>&yen;10.00</p>
                            <p>&yen;100.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="images/detail02.jpg" alt="" /></a>
                            <p>&yen;10.00</p>
                            <p>&yen;100.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="images/detail01.jpg" alt="" /></a>
                            <p>&yen;10.00</p>
                            <p>&yen;100.00</p>
                        </li>
                    </ul>
                </div>
            </section>
            <!--商品子盒子-->
            <section class="product_box">
                <!--头部-->
                <div class="product_box_tit">
                    <h3>京东超市</h3></div>
                <!--内容-->
                <div class="product_box_con clearfix">
                    <a href="#" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt="" /></a>
                    <a href="#" class="f_right w_50 b_bottom"><img src="images/cp2.jpg" alt="" /></a>
                    <a href="#" class="f_right w_50 "><img src="images/cp3.jpg" alt="" /></a>
                </div>
            </section>
            <!--商品子盒子-->
            <section class="product_box">
                <!--头部-->
                <div class="product_box_tit">
                    <h3>京东超市</h3></div>
                <!--内容-->
                <div class="product_box_con clearfix">
                    <a href="#" class="f_right w_50 b_left"><img src="images/cp4.jpg" alt="" /></a>
                    <a href="#" class="f_left w_50 b_bottom"><img src="images/cp5.jpg" alt="" /></a>
                    <a href="#" class="f_left w_50"><img src="images/cp6.jpg" alt="" /></a>
                </div>
            </section>
            <!--商品子盒子-->
            <section class="product_box">
                <!--头部-->
                <div class="product_box_tit">
                    <h3>京东超市</h3></div>
                <!--内容-->
                <!--内容-->
                <div class="product_box_con clearfix">
                    <a href="#" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt="" /></a>
                    <a href="#" class="f_right w_50 b_bottom"><img src="images/cp2.jpg" alt="" /></a>
                    <a href="#" class="f_right w_50 "><img src="images/cp3.jpg" alt="" /></a>
                </div>
            </section>
        </main>
    </div>
</body>

</html>


<!-- zepto版本的代码 -->
<!-- 基础包 -->
<script type="text/javascript" src='js/zepto/zepto.min.js'></script>
<script type="text/javascript" src='js/zepto/fx.js'></script>
<!-- 如果 只是使用 touch的事件 可以不到 event这个包 -->
<script type="text/javascript" src='js/zepto/touch.js'></script>
<script type="text/javascript" src='js/zepto/'></script>
<script type="text/javascript">
// 定义index 记录 拨动的张数
var index = 1;

$(function() {

    // 获取 轮播图的宽度
    var bannerWidth = $('.jd_banner').width();

    // 定时器 自动轮播
    var timeid = setInterval(function() {
        index++;

        // 动画的方式 让 ul 进行移动
        $('.jd_banner ul:first-child').animate({
            transform: 'translateX(' + index * bannerWidth * -1 + 'px)'
        }, 300,'linear' ,function() {
            // console.log('滚动完毕');
            // 判断index 是否越界
            if (index > 8) {
                index = 1;
                $('.jd_banner ul:first-child').css('transform', 'translateX(' + index * bannerWidth * -1 + 'px)');
            }

            // 修改 索引
            $('.jd_banner ul:last-child li').removeClass('now').eq(index - 1).addClass('now');
        });
    }, 2000);


    $('.jd_banner').swipeLeft(function() {

        // 关闭定时器
        clearInterval(timeid);

        index++;

        // 动画的方式 让 ul 进行移动
        $('.jd_banner ul:first-child').animate({
            transform: 'translateX(' + index * bannerWidth * -1 + 'px)'
        }, 300, function() {
            // console.log('滚动完毕');
            // 判断index 是否越界
            if (index > 8) {
                index = 1;
                $(this).css('transform', 'translateX(' + index * bannerWidth * -1 + 'px)');
            }

            // 修改 索引
            $('.jd_banner ul:last-child li').removeClass('now').eq(index - 1).addClass('now');

            // 过渡结束以后 开启定时器
           timeid = setInterval(function() {
                index++;

                // 动画的方式 让 ul 进行移动
                $('.jd_banner ul:first-child').animate({
                    transform: 'translateX(' + index * bannerWidth * -1 + 'px)'
                }, 300, function() {
                    // console.log('滚动完毕');
                    // 判断index 是否越界
                    if (index > 8) {
                        index = 1;
                        $('.jd_banner ul:first-child').css('transform', 'translateX(' + index * bannerWidth * -1 + 'px)');
                    }

                    // 修改 索引
                    $('.jd_banner ul:last-child li').removeClass('now').eq(index - 1).addClass('now');
                });
            },2000)
        });

    }).swipeRight(function() {

        index--;
        // 动画的方式 让 ul 进行移动
        $('.jd_banner ul:first-child').animate({
            transform: 'translateX(' + index * bannerWidth * -1 + 'px)'
        }, 300, function() {
            // console.log('滚动完毕');
            // 判断index 是否越界
            if (index < 1) {
                index = 8;
                $(this).css('transform', 'translateX(' + index * bannerWidth * -1 + 'px)');
            }
            // 修改 索引
            $('.jd_banner ul:last-child li').removeClass('now').eq(index - 1).addClass('now');
        });

    })
})
</script>
